/*初始化函数*/
layui.use(['laypage', 'element', 'layer'], function () {
    let laypage = layui.laypage,
        layer = layui.layer,
        $ = layui.$;

    // 0.1 根据屏幕大小改内容大小
    if (window.screen.width <= 768) {
        $("#main_content").css("padding", "6em 0 10em 0").css("width", "100%");
    }
    // 1.查询按钮
    let $search_btn = $("#search_btn");
    $search_btn.click(function () {
        let title = $.trim($("input[name='search_blog_title']").val());
        $("input[name='hidden_blog_title']").val(title);
        pageList(1, PageSize, true);
    })

    // 1.2 绑定搜索框的keyup事件
    let $search_input = $("input[name='search_blog_title']")
    $search_input.keyup(function (event) {
        if (event.keyCode === 13)
            $search_btn.click();
    })

    // 0.1 加载分类
    $.get("/typeInfo", function (result) {
        if (result.code === 200) {
            let html_str = "";
            $.each(result.data, function (i, n) {
                if (i < 3)
                    html_str += '<div class="layui-row" style="padding: 0.5em">';
                else
                    html_str += '<div class="layui-row" style="padding: 0.5em" hidden>'
                html_str += '<div class="layui-col-xs8">';
                html_str += '<a href="/blog/blog_type.html?id=' + n.id + '" >' + n.name + '</a></div>';
                html_str += '<div class="layui-col-xs-2 layui-col-xs-offset2">';
                html_str += '<span class="layui-badge">' + n.blogNumber + '</span>';
                html_str += '</div></div>';
            })
            $("#type_list").html(html_str);
            load_tag(layer);
        } else layer.msg(result.msg, {icon: 5});
    })

    // 0.2 点击查询按钮
    $search_input.val("");
    $search_btn.click();

    // 0.3 加载最新博客列表
    load_blog_new(layer);
});

/*0.2 加载标签的函数*/
function load_tag(layer) {
    $.get("/tagInfo", function (result) {
        if (result.code === 200) {
            let html_str_computer = "";
            let html_str_phone = "";
            $.each(result.data, function (i, n) {
                if (i % 2 === 0) {
                    if (i < 4)
                        html_str_computer += '<div class="layui-row" style="padding: 0.5em">';
                    else
                        html_str_computer += '<div class="layui-row" style="padding: 0.5em" hidden>';
                    html_str_computer += '<div class="layui-col-xs4 layui-col-xs-offset1">';
                    html_str_computer += '<a href="/blog/blog_tag.html?id=' + n.id + '" class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs layui-font-orange">' + n.name + '<span class="layui-badge">' + n.blogNumber + '</span></a></div>';
                } else {
                    html_str_computer += '<div class="layui-col-xs4 layui-col-xs-offset2">';
                    html_str_computer += '<a href="/blog/blog_tag.html?id=' + n.id + '" class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs layui-font-orange">' + n.name + '<span class="layui-badge">' + n.blogNumber + '</span></a></div></div>';
                }
                if (i === (result.data.length - 1) && i % 2 === 0) {
                    html_str_computer += '</div>';
                }
                if (i < 3)
                    html_str_phone += '<div class="layui-row">';
                else html_str_phone += '<div class="layui-row" hidden>';
                html_str_phone += '<div class="layui-col-xs12">';
                html_str_phone += '<a href="/blog/blog_tag.html?id=' + n.id + '" class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs layui-font-orange">' + n.name + '<span class="layui-badge">' + n.blogNumber + '</span></a></div></div>';
            })
            $("#tag_list_computer").html(html_str_computer);
            $("#tag_list_phone").html(html_str_phone);
            layer.closeAll("loading");
        } else layer.msg(result.msg, {icon: 5});
    })
}

/*0.3 加载最新博客列表的函数*/
function load_blog_new(layer) {
    $.get("/blog/newBlogList", function (result) {
        if (result.code === 200) {
            let html_str = "";
            $.each(JSON.parse(result.data), function (i, n) {
                if (i < 3)
                    html_str += '<div class="layui-row" style="padding: 0.5em"><div class="layui-col-xs8">';
                else
                    html_str += '<div class="layui-row" style="padding: 0.5em" hidden><div class="layui-col-xs8">';
                html_str += '<a href="/blog/blog_detail.html?id=' + n.id + '" class="layui-font-green">' + n.title + '</a></div>';
                html_str += ' <div class="layui-col-xs-2 layui-col-xs-offset2">';
                html_str += '<span class="layui-icon layui-icon-senior layui-font-red">' + n.viewTimes + '</span></div></div>';
            })
            $("#blog_new_list").html(html_str);
        } else layer.msg(result.msg, {icon: 5});
    })
}


/*分页查询的函数*/
function pageList(page_no, page_size, isRender) {
    let laypage = layui.laypage,
        layer = layui.layer,
        $ = layui.$;
    let page_load_index = layer.load(0);
    let title = $("input[name='hidden_blog_title']").val();
    $.get("/blog/info/page", {
        "title": title,
        "published": true,
        "page_no": page_no,
        "page_size": page_size
    }, function (result) {
        if (result.code === 200) {
            let html_str = "";
            $.each(result.data, function (i, n) {
                html_str += '<div class="layui-card layui-bg-gray">';
                html_str += '<a href="/blog/blog_detail.html?id=' + n.id + '"><div class="layui-card-header"><h3><strong>' + n.title + '</strong></h3></div></a>';
                html_str += '<div class="layui-card-body"><div class="layui-row"><div class="layui-col-md3"><a href="/blog/blog_detail.html?id=' + n.id + '">';
                html_str += '<img src="' + n.imageUrl + '" alt="图片" style="height: auto;width: 100%"></a></div>';
                html_str += '<div class="layui-col-md8 layui-col-md-offset1"><div class="layui-row">' + n.description + '</div>';

                // 博客的标签信息
                html_str += '<div class="layui-row">';
                $.each(n.tagList, function (j, m) {
                    html_str += '<div class="layui-col-md2 layui-col-sm3 layui-col-xs6" style="padding: 0.5em 0.5em">';
                    html_str += '<button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs" onclick="window.location.href=\'/blog/blog_tag.html?id=' + m.id + '\'" name="tag_id" value="' + m.id + '">';
                    html_str += m.name + '</button></div>';
                })
                html_str += '</div>';

                html_str += '<div class="layui-row layui-col-space4">';
                html_str += '<div class="layui-col-md1 layui-col-sm1"><img class="layui-nav-img" src="' + n.createUser.headPortraitUrl + '" alt=""></div>';
                html_str += '<div class="layui-col-md3 layui-col-sm3"><a href="#"><span class="layui-font-blue">' + n.createUser.username + '</span></a></div>';
                html_str += '<div class="layui-col-md3 layui-col-sm3"><i class="layui-icon layui-icon-date"></i>' + n.publishDate + '</div>';
                html_str += '<div class="layui-col-md2 layui-col-sm2"><i class="layui-icon layui-icon-senior"></i>' + n.viewTimes + '</div>';
                html_str += '<div class="layui-col-md3 layui-col-sm3"><button class="layui-btn layui-btn-xs layui-btn-radius">' + n.typeName + '</button></div>';
                html_str += '</div></div></div></div></div>';
            })
            $("#blog_list").html(html_str);
            if (isRender) {
                $("span[name='blog_number']").html(result.total);
                //执行一个laypage实例
                laypage.render({
                    elem: 'blog_page_btn', //注意，这里的 test1 是 ID，不用加 # 号
                    count: result.total, //数据总数，从服务端得到
                    limit: PageSize,    //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                    theme: '#123456',//自定义主题
                    jump: function (obj, first) {//
                        // 当分页被切换时触发，函数返回两个参数：
                        // obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
                        //obj包含了当前分页的所有参数，比如：
                        //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        //console.log(obj.limit); //得到每页显示的条数

                        //首次不执行
                        if (!first) {
                            //do something
                            pageList(obj.curr, obj.limit, false);
                        }
                    }
                });
            }
        } else layer.msg(result.msg);
        layer.close(page_load_index);
        $("img[name='to_top']").click();
    })
}

const PageSize =10